<template>
  <div class="reItem">
    <div class="reRow1 vux-1px-b">
      <span class="title" v-text="item2.id"></span>
      <line1 len="0.4rem" style="margin:0 0.2667rem"></line1>
      <div class="titleBox">
        {{this.item2.pt_name}}
        <Tag :tag="offText" style="margin-left:.3rem"></Tag>
      </div>
      <img @click="toBuy" src="../../../../static/assets/icon_buy.png" style="width:0.73rem;height:.73rem">
    </div>
    <div class="reRow2">
      <div class="item1">
        <div class="itemBox">
          <span id="reBackBox">
            <div>
              <span class="reBack">{{Number(this.item2.tzmoney)}}</span>元
            </div>
          </span>
          <span>投资金额</span>
        </div>
        <div class="itemBox" style="margin-left:.2rem">
          <span id="yearRateBox">
            <div>
              <span class="yearRate">{{Number(this.item2.zrmoney)}}</span>元
            </div>
          </span>
          <span>转让金额</span>
        </div>
      </div>
      <line1 style="margin:0 0.2rem 0 .2rem"></line1>
      <div class="qixianqitou">
        <div>
          投资时间<span class="txt">{{this.item2.tztime}}</span>
        </div>
        <div>
          到期时间<span class="txt">{{this.item2.dqtime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Line1 from './Line'
import Tag from './Tag'
import {setStore} from '../../../config/mUtils.js'
import {cpDetail} from '../../../service/getData.js'

export default {
  components:{
    Line1,
    Tag,
  },
  props:['item'],
  data(){
    return {
      cssOB:{
        margin:'0 0.4rem 0 1rem',
      },
      isYuan:false,
      item2:this.item,
      offText:'折扣 '+Number(this.item.sale.split('.').join(''))+'%'
    }
  },
  watch:{
    item(){
      this.item2 = this.item
      this.offText='折扣 '+Number(this.item.sale.split('.').join(''))+'%'
    }
  },
  computed:{
    isYuan2(){
      this.isYuan = this.item2.type == 1
      return this.isYuan?this.item2.zgfl||' '.substring(0,this.item2.zgfl||' '.length-1):this.item2.zgfl;
    },
  },
  methods:{
    toBuy(){
      this.$router.push('/buy')
    }
  },
}
</script>
<style lang="less" scoped>
@import '../../../style/mixin.less';
  .reItem{
    box-sizing: border-box;
    width: 9.2rem;
    height: 3.226667rem;
    box-shadow:2px 2px 10px #aaa;
    padding: 0 .4rem;
    // background-color: burlywood;
    .title{
      .sc(0.6133rem,#dd3930);
    }
    .reRow1{
      height: .986667rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      // line-height: .986667rem;
      font-size: 0.3733rem;
      .titleBox{
        display: flex;
        flex-direction: row;
        width:77%;
      }
      img:first-child{
        width: 1.1333rem;
        height: 0.4133rem;
      }
      img:last-child{
        width: 0.16rem;
        height: 0.32rem;
        display: inline-block;
        float: right;
      }
    }
    .reRow2{
      height: 2.1rem;
      // background-color: cornflowerblue;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 0.32rem;
      color: #c6c6c6;
      .item1{
        width: 4.3rem;
        .fx(row,flex-start)
      }
      .itemBox{
        display: flex;
        flex-direction: column;
      }
      #yearRateBox{
        color:#dd3930;
        .yearRate{
          font-size: 0.56rem;
          margin-right:.1rem;
          font-weight: bold
        }
      }
      #reBackBox{
        color:#000;
        .reBack{
          font-size: 0.56rem;
          font-weight: bold;
          margin-right: .1rem;
        }
      }
      .qixianqitou{
        font-size: 0.3467rem;
      }
      .txt{
        margin-left: 0.2667rem;
        color:#000;
        width:.2rem
      }
    }
  }
</style>
